<template>
    <div class="add-report">
        <div class="report-item">
            <div class="item-name">
                <span>上报人数</span>
            </div>
            <div class="item-input">
                <input style="color:#999;" v-model="reportDateInfo.FillInNum" readonly type="number" placeholder="点击输入">
            </div>
        </div>
        <div class="report-item">
            <div class="item-name">
                <span>新增确诊人数</span>
                <span class="red">*</span>
            </div>
            <div class="item-input">
                <input v-model="reportDateInfo.AddDiagnosisNum" :readonly="noEdit"  type="number" placeholder="点击输入">
            </div>
        </div>
        <div class="report-item">
            <div class="item-name">
                <span>新增疑似人数</span>
            </div>
            <div class="item-input">
                <input style="color:#999;" v-model="reportDateInfo.AddSuspectedNum" readonly  type="number" placeholder="点击输入">
            </div>
        </div>
        <div class="report-item">
            <div class="item-name">
                <span>新增治愈人数</span>
                <span class="red">*</span>
            </div>
            <div class="item-input">
                <input v-model="reportDateInfo.AddCureNum" :readonly="noEdit"  type="number" placeholder="点击输入">
            </div>
        </div>
        <div class="btns">
            <div class="submit" @click="submit" v-if="!noEdit">提交</div>
        </div>
        <myMenu></myMenu>
    </div>
</template>

<script>
import Search from '@commonComponents/search'
import myMenu from '@/commonComponents/menu'
export default {
    name: 'addReport',
    data () {
        return {
            reportDateInfo: {}, // 疫情上报数据详情
            noEdit: true,
            userInfo: {} // 用户信息
        }
    },
    components: {
        Search,
        myMenu
    },
    methods: {
        getData () {
            this.$axiosAjax.GetSingleDataById({
                id: this.$route.query.id
            }).then(res => {
                if (res.status == 200) {
                    this.reportDateInfo = res.data.date
                }
            })
        },
        submit () {
            if (!this.reportDateInfo.AddDiagnosisNum && this.reportDateInfo.AddDiagnosisNum != 0) {
                this.$vux.toast.text('请输入新增确诊人数');
                return;
            }
            if (!this.reportDateInfo.AddCureNum && this.reportDateInfo.AddCureNum != 0) {
                this.$vux.toast.text('请输入新增治愈人数');
                return;
            }
            this.$vux.loading.show({
                text: '正在提交...'
            });
            this.$axiosAjax.UpdateReport({
                id: this.$route.query.id,
                AddDiagnosisNum: this.reportDateInfo.AddDiagnosisNum,
                AddCureNum: this.reportDateInfo.AddCureNum
            }).then(res => {
                this.$vux.loading.hide();
                if (res.status == 200) {
                    if (res.data.code == 0) {
                        this.$vux.toast.text('修改成功');
                        setTimeout(() => {
                            this.$router.go(-1)
                        }, 1000)
                    }
                }
            }).catch(e => {
                this.$vux.loading.hide();
            }).finally(() => {
                this.$vux.loading.hide();
            })
        }
    },
    created () {
        this.userInfo = JSON.parse(localStorage.getItem('registerInfo')) || {}
        this.$axiosAjax.GetIsManager({
            userNo: this.userInfo.userId
        }).then(res => {
            if (res.status == 200) {
                if (res.data.code == 1) {
                    this.noEdit = false
                } else {
                    this.noEdit = true
                }
            }
        })
    },
    mounted () {
        this.getData()
    }
}
</script>

<style lang="less" scoped>
    .add-report {
        background-color: #EBEEF2;
        .report-item {
            padding: 0 20px;
            background-color: #fff;
            width: 100%;
            height: 50px;
            line-height: 50px;
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            border-bottom: 1px solid #f3f3f3;
            .item-name {
                .red {
                    color: red;
                }
            }
            .item-input {
                input {
                    text-align: right;
                    &::-webkit-input-placeholder { /* WebKit browsers */
                        direction: rtl;
                        font-size: 14px;
                    }
                    &::-moz-placeholder { /* Mozilla Firefox 4 to 18 */
                        direction: rtl;
                        font-size: 14px;
                    }
                    &::-moz-placeholder { /* Mozilla Firefox 19+ but I'm not sure about working */
                        direction: rtl;
                        font-size: 14px;
                    }
                    &::-ms-input-placeholder { /* Internet Explorer 10+ */
                        direction: rtl;
                        font-size: 14px;
                    }
                }
            }
        }
        .btns {
            width: 100%;
            display: flex;
            justify-content: space-between;
            background-color: #fff;
            justify-content: center;
            .save, .submit {
                width: 150px;
                height: 40px;
                line-height: 40px;
                border-radius: 20px;
                text-align: center;
                color: #fff;
                background-color: #2269FC;
            }
            .submit {

            }
        }
    }
</style>